<template>
  <!-- 密码 -->
  <u-popup v-model="show" mode="center" border-radius="14">
    <div class="pup" v-if="info">
      <view class="title u-font-30 u-flex u-col-center u-row-between">
        <text class="p0">缴费</text>
        <u-icon name="close" color="#aaa" size="26" @click="show = false"></u-icon>
      </view>
      <view class="p1">{{info.house_title}}</view>
      <view class="p p3">热水费：{{info.otherOrders.hot_water_order_payment}}元</view>
      <view class="p p2">冷水费：{{info.otherOrders.cold_water_order_payment}}元</view>
      <view class="p p4">电费：{{info.otherOrders.electric_order_payment}}元</view>
      <view class="p p5">
        <view>总计：{{info.otherOrders.totalFee || allPrice}}元</view>
        <view class="btn" @click="submit">立即缴费</view>
      </view>
    </div>
  </u-popup>
</template>

<script>
  export default {
    name:"zb-jiaofei",
    props: {
      title: {
        default: '暂无数据'
      },
      top: {
        default: '0'
      },
    },
    data() {
      return {
        show:false,
        info:null,
        allPrice: 0.01
      };
    },
    methods:{
      showFun(datas){
        this.show = true;
        this.info = datas
        this.allPrice = datas.otherOrders.hot_water_order_payment+datas.otherOrders.cold_water_order_payment+datas.otherOrders.electric_order_payment
      },
      submit(){
        uni.showLoading()
        this.$api.payLifeOrderApi({ordersNo: this.info.tenancy_order_sn, orderFee: this.info.totalFee || this.allPrice}).then(res=>{
          uni.hideLoading()
          if(res.code === 1){
            uni.requestPayment({
            	provider: 'wxpay',
            	timeStamp: res.data.timeStamp,
            	nonceStr: res.data.nonceStr,
            	package: res.data.package,
            	signType: res.data.signType,
            	paySign: res.data.paySign,
            	success: rest => {
            		this.$u.toast('支付成功！');
                this.show = false;
                this.$emit('ok')
            	},
            	fail: err => {
            		if (err.errMsg == "requestPayment:fail cancel") {
            		  this.$u.toast('支付已取消');
            		}else{
            		  this.$u.toast('错误：' + err.errMsg)
            		}
            	}
            });
          }else{
            this.$u.toast(res.msg);
          }
        })
        
      },
    }
  }
</script>

<style lang="scss" scoped>
.pup{
  padding: 0 30rpx; width:600rpx;box-sizing: border-box;
  .title{font-size: 30rpx; height: 90rpx; border-bottom: 1px solid #ededed; margin: 0 -30rpx 20rpx; padding: 0 30rpx;}
  
  .p0{font-size: 30rpx;}
  .p{margin-top: 16rpx;}
  .p5{border-top: 1px solid #ededed; display: flex; align-items: center; justify-content: space-between; padding: 26rpx 30rpx; margin: 30rpx -30rpx;}
  .btn{background-color: #2A70F9; color: #fff; border-radius: 6rpx; display: flex; align-items: center; justify-content: center; height: 60rpx; padding: 0 30rpx;}
}
</style>